M. Adlan Ramly
Interaction Designer & UX Researcher

She and The Light Bearer

June - September 2018
Role: UX/UI Designer & QA Engineer Intern
Research Methods: QA Tests
Collaborator(s):
Toge Productions & Mojiken Studios
Released on Steam

Project Overview

She and The Light Bearer is a point-and-click game developed by Mojiken Studio and published by Toge Productions. You play as Firefly and her main quest is to find Mother in a lush forest while meeting a variety of interesting characters along her journey.

Goal

The goal during my internship is to help Mojiken Studio to test the demo, run QA tests, and give feedback on the UX/UI aspect for She and The Light Bearer

QA Planning

  • While my main project was Coffee Talk as a UX/UI Engineer where my design decisions are based on survey data, my task for this project was more related to QA Testing where I provide my quick insights as a UX/UI Designer.
  • This feedback is meant to be given before performing usability tests, which explains why it didn’t require a surveys or playtesting sessions.
  • I created a template for QA Testing.

  • The document starts with the title of the game to indicate what game is being tested.
  • Game development is an iterative process, keeping track of build versions is important.
  • It is crucial to write who conducted the test & the date when the test is performed.
  • Color-coded issues based on its level of urgency to make it easier for the designers and developers.
  • Organized chronologically based on the first encounter in a time frame

Design Improvements

Based on the testing performed, I found most of the issues in the game were related to navigation issues. Navigation is vital to the players’ experience which could boost the overall experience of the game, especially in point-and-click adventure games.

Title Screen

Before

  • The Title Screen is very important in giving potential players first impressions of the game.
  • Options are currently set horizontally & need to be sorted from the most frequent selected option to the least.
  • The current spacing between each option is uneven.
  • Another aspect to mention is the placement of the Continue option when a save file exists.

After

  • Title screen now uses a vertical layout.
  • The Continue option is shown first.
  • The spacing is now symmetric.

Menu Button

Before

  • The menu button is barely visible specifically in this area because of the size, shape, & color of the button. (Top left corner)
  • Players might be confused with the affordance of the “arrow” icon, which doesn’t imply a function to open the menu button.
  • Players might confuse the arrow button as a button to move the camera into the right direction or proceed to the next area.

  • The six icons from the menu are too transparent, which are difficult to see and sometimes blend in with the background if the background has a bright hue.
  • The icons for each function are difficult to understand as well since they use unfamiliar icons.
  • The interaction design is inefficient because players need to hover each of the icons to see their functions.

After

  • The Menu button’s placement is now placed on the top right of the screen.
  • The Menu button’s icon is also changed to the standard hamburger icon which implies its function to toggle a collapsed menu.
  • Utilizing a more recognizable icon is a good practice to increase the system’s learnability.
  • Instead of using unfamiliar icons as seen on the previous design, it uses straightforward labels to explain each of the options under the menu.

Choice Selection

Before

The selected options in the previous design are grey-colored which might lead players think that they cannot be selected anymore.

After

The selected option color has been changed into a different color which implies that it can be selected again.

Visual Cues

Before

In a game filled with puzzles and riddles, it is important to give visual cues to the players about which objects are interactive.

At my first playthrough, I thought this part was a cutscene whereI waited for 10 seconds and nothing happened. It turned out it was a puzzle where I have to rotate the parts and match the pieces

After

In the final game, visual cues are shown as subtle arrows to display an object’s interactivity. This explains the players visually that the puzzle is interacted by spinning the plates without giving the puzzle’s answer.

Speed Up Button

Based on the demo, Firefly moves a bit too slow when she moves to a different area, I suggested this feature to be included to reduce waiting time for players.

A large speed up button is added on the top left of the user interface which allows players to speed up the game.

Conclusion

I am surprised that there are a lot of UX/UI improvements since the last time I played the unfinished demo. Upon release on Steam, I am glad that the game has received a lot of positive feedback.

This game is a must try for point-and-click adventure game enthusiasts. It is now on Steam for $9.99!

“The whole game feels like a poem written with sincerity and love”
“This was a surprisingly sweet and lovely game to play. It’s a visual novel with some interactivity and some light puzzles”
“Beautiful and captures the storybook vibe perfectly”

Read More